<template>
  <div>
    <!-- 商品信息 -->
    <template v-if="name === 'product'">
      <div>商品名称：{{ row.productName || '--' }}</div>
      <div>商品所属：{{ row.type == 1 ? '自营' : '百度健康' }}</div>
      <div>商品类型：{{ row.externalType == 0 ? '普通商品' : '组合商品' }}</div>
    </template>

    <!-- 套餐规格 -->
    <template v-if="name === 'productUnitNum'">
      <div v-if="row.externalType == 1 && row.type == 1">
        <div v-html="getTotalNum(row)"></div>
      </div>
      <div v-else>{{ row.productUnitNum }}盒</div>
    </template>

    <!-- 套餐图片 -->
    <template v-if="name === 'productImage'">
      <template v-if="row.type == 1">
        <ImagePreview :src="row.productImage" width="120px" height="120px" />
      </template>
      <template v-else>
        <el-carousel
          v-if="row.productImage"
          :interval="1500"
          arrow="always"
          height="200px"
          indicator-position="none"
          trigger="click"
        >
          <el-carousel-item v-for="(img, idx) in row.productImage.split(',')" :key="idx">
            <el-image style="width: 180px; height: 180px; object-fit: cover" :src="img" />
          </el-carousel-item>
        </el-carousel>
        <div v-else>暂无图片</div>
      </template>
    </template>

    <!-- 价格 -->
    <template v-if="name === 'price'">
      <div>成本价：{{ row.costPrice }}</div>
      <div>零售价：{{ row.salePrice }}</div>
    </template>
  </div>
</template>

<script setup lang="ts">
defineProps<{
  row: any;
  name: string;
}>();

// 获取套餐内商品得数量和
const getTotalNum = (row: any) => {
  let totalNum: any = 0;
  let totalStr: any = '';
  row.productCollection.forEach((item: any) => {
    totalNum += item.num;
    totalStr += `${item.productName}: ${item.num}盒<br />`;
  });
  return ` ${totalStr}共:${totalNum}盒 `;
};
</script>
